<template>
	<view>
		<zy-empty v-if="!this.processList"></zy-empty>
		<view class="container" v-else>
			<view v-for="(item,index) in processList" class="processNav" @click="getUrl(index)" hover-class="bg-click">
				<view class="img">
					<view :class="item.fileFormat == 'mp4'? 'mp4':'file'"></view>
				</view>
				<view class="text">{{item.originalFilename}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import baseUrl from '@/utils/getIp.js'
	export default {
		components: {},
		data() {
			return {
				processList: [],
				pathList: [],
				fileFormat: []
			}
		},
		mounted() {
			// 获取工序详情
			this.findCardInfoByNoList = this.$store.state.findCardInfoByNoData
			this.processList = this.findCardInfoByNoList.attachmentList
		},
		methods: {
			// 获取工艺资料
			getUrl(index) {
				this.pathList = this.processList[index].filePath
				this.fileFormat = this.processList[index].fileFormat
				uni.downloadFile({
					url: baseUrl + '/files/' + this.pathList,
					success: function(res) {
						var filePath = res.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							showMenu: true,
							success: function(res) {
								uni.showToast({
									title: this.$t('homepage.ProductionMonitor.openDocument'),
									icon: "none",
									duration: 3000
								});
							},
							fail: function(res) {
								uni.showToast({
									title: this.$t('homepage.ProductionMonitor.dissupportType'),
									icon: "none",
									duration: 3000
								});
							}
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #fff;
		margin: 10px;
		border-radius: 4px;
		width: calc(100%-40px);
		padding: 10px;
	}

	.processNav {
		width: 100%;
		height: 60px;
		align-items: center;
		display: flex;
		flex-direction: row;
		border-bottom: 1px solid #f5f5f5;
		word-break: break-all;
		word-wrap: break-word;
	}

	.bg-click {
		color: #5677fc;
		background: #f5f5f5;
	}

	.img {
		width: 20%;
	}

	.file {
		width: 30px;
		height: 30px;
		background: url(../../../../../static/assets/homepage/file.png) no-repeat;
		background-size: 30px 30px;
		margin: 10px;
	}

	.mp4 {
		width: 30px;
		height: 30px;
		background: url(../../../../../static/assets/homepage/video.png) no-repeat;
		background-size: 30px 30px;
		margin: 10px;
	}

	.text {
		width: 75%;
	}
</style>
